	<template>
	<div class="photoSty">
	 <div class="tab">
	 	<div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						<a :class="'mui-control-item '+(categoryId===categoryItem.id?'mui-active':'')" href="#item1mobile" data-wid="tab-top-subpage-1.html" v-for="(categoryItem,categoryIndex) in categoryList" :key="categoryIndex" @click="getImgDetail(categoryItem.id)">
							{{categoryItem.title}}
						</a>					
					</div>
				</div>

			</div>
	 </div>
	 <div class="commentContent">
	 	<ul class="comment-item">
			 <router-link tag="li"  v-for="(photoItem,photoIndex) in photoList" :key="photoIndex" :to="'/home/photoInfo/'+photoItem.id">
			 	<div class="photoIntroduction"><p><span>{{photoItem.seo_description}}</span></p></div>
			 	<img v-lazy="photoItem.img_url">
			 </router-link>
		</ul>
	 </div>	 
	</div>
	</template>


	<script>
	import {Toast} from 'mint-ui'
	import mui from '../../../lib/mui/js/mui.js'
	mui('.mui-scroll-wrapper').scroll({
	deceleration: 0.0005 //flick减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006 
});
	export default{	
	  data(){
	    return{
	      categoryList:[],
	      photoList:[],
	      pageIndex:1,
	      userComment:'',
	      newComment:[],
	      categoryId:0

	    }
	  },
	  props:["id"],
	  mounted(){
	  	mui('.mui-scroll-wrapper').scroll({
			deceleration: 0.0005 //flick减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006 
		});
		this.getCategoryList()

	  },
	  created(){  	
	  
	  this.getPhotoList()

	  },
  methods:{
	    async getCategoryList(){
		   	const {data}=await this.$http.get(`/api/getimgcategory`)
		   	if(data.status===0) {
		   		this.categoryList=data.message
		   		this.categoryList.unshift({
		   			title:'全部',
		   			id:0
		   		})
		   	}
	   },
		loadMore(){
			this.pageIndex+=1
			this.getPhotoList()
		},
		async getPhotoList(){
			console.log('105')
		   	const {data}=await this.$http.get(`/api/getimages/${this.categoryId}`)
		   	if(data.status===0) {
		   		this.photoList=data.message
		   		
		   	}
	   },
		getImgDetail(id){
			this.categoryId=id
			this.getPhotoList()
		}
  }
}
	</script>

	<style lang="less">
	.photoSty{
		color:#000;
		padding: 10px;
		padding-bottom:50px;
		textarea{
		font-size:14px;
		}
		.mui-slider{
			touch-action:pan-x;
		}
		.commentContent{		
		margin-top:15px;
			.comment-item{
			width: 100%;
			text-align: center;
			list-style: none;
			padding: 0;
			li{
				background: #ccc;
				position: relative;			
				& + li{
					margin-top: 10px;
				}
				.photoIntroduction{
					display: inline-block;
					position: absolute;
					bottom:0;
					width: 100%;
					height: 80px;
					background: rgba(0,0,0,0.5);
					padding: 3px;
					p{
						width: 100%;
						text-align: left;
						overflow:hidden;
						text-overflow:ellipsis;
						display:-webkit-box;
						-webkit-line-clamp:3;
						/* ! autoprefixer: off */
						-webkit-box-orient:vertical;
						/* autoprefixer: on */
						color: #fff;
						font-size: 18px;
					}
					
					
				}
				img{
					width: 100%;

				}
				img[lazy=loading] {
				  width: 40px;
				  height: 300px;
				  margin:auto;
				}
			}
				
			}
		}
		
	}

	</style>	
